<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天内容</title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="height: 520px;overflow-y:auto" id="chat_list"></div>
    </div>
</div>

</body>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    pageIndex = 1;
    pageCount = 0;
    layui.config({
        base: "/layuiadmin/", //静态资源所在路径
    }).extend({
        index: "lib/index", //主入口模块
    }).use(["table"], function () {
        $ = layui.jquery;
        function chat_content_list(is_bottom, page) {
            $.ajax({
                url: '/admin/privatechat/chat_content?id={$model->id}',
                type: 'post',
                data: {page: page},
                dataType: 'json',
                beforeSend: function() { //当一个Ajax请求开始时触发
                    layer.load(); //打开layui加载效果
                },
                success: function (data) {
                    if (data.code == 0) {
                        var list = data.list;
                        var htmlStr = '';
                        for (var i = list.length - 1; i >= 0; i--) {
                            htmlStr += '<div style="padding: 8px 0px;"><div>';
                            htmlStr += '<strong>' + list[i].nick_name + '</strong>';
                            htmlStr += '<date style="padding-left: 40px">' + list[i].send_time+ '</date></div>';
                            htmlStr += '<div style="width: 300px;padding-left: 30px;padding-top: 5px;display: flex;flex-wrap: wrap">' + list[i].content + '</div></div>';
                        }
                        if (htmlStr) {
                            $('#chat_list').prepend(htmlStr);
                            pageIndex = data.page;
                            pageCount = data.pageCount;
                        }

                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }

                    layer.closeAll();

                    if (is_bottom) {
                        $('#chat_list').scrollTop($('#chat_list')[0].scrollHeight);
                    } else {
                        $('#chat_list').scrollTop(0);
                    }
                },
                error: function(res) {
                    layer.closeAll();
                }
            });
        }

        $('#chat_list').scroll(function (e) {
            if ($('#chat_list').scrollTop() == 0 && pageIndex < pageCount ) {
                chat_content_list(false, pageIndex + 1);
            }
        });

        chat_content_list(true, pageIndex);
    });
    </script>
</html>